<template>
  <p
    class="event-item"
    :style="{backgroundColor:event.color,color:event.size,height,whiteSpace,wordBreak}"
    ref="titled"
    :class="cssClasses"
    @click="$emit('click', event, $event)"
  >
    <slot :event="event" v-if="showTitle">Def: {{ event.title }}</slot>
  </p>
</template>

<script>
import moment from "moment";

export default {
  props: ["event", "date", "firstDay", "typesof"],
  mounted() {
    this.txt(this.typesof);
  },
  data(){
      return{
        height:"80px",
        whiteSpace:"pre-wrap",
        wordBreak:"break-all",

      }
  },
  methods: {
    txt(v) {
       switch (v) {
        case 0:
      this.whiteSpace = "nowrap";
        this.overflow = "hidden";
        this.height = "18px";
          break;
        case 1:
          this.height = "80px";
          this.whiteSpace = "pre-wrap";
        this.wordBreak = "break-all";
          break;
        case 2:
          this.height = "100px";
         this.whiteSpace = "pre-wrap";
        this.wordBreak = "break-all";
          break;
      }
    }
  },
  computed: {
    cssClasses() {
      console.log(this.event)
      let cssClasses = this.event.cssClass;
      if (!Array.isArray(cssClasses)) {
        cssClasses = [cssClasses];
      } else {
        cssClasses = Array.from(cssClasses);
      }
      if (this.start.isSame(this.date, "day")) {
        cssClasses.push("is-start");
      }

      if (this.end.isSame(this.date, "day")) {
        cssClasses.push("is-end");
      }

      if (!this.event.isShow) {
        cssClasses.push("is-opacity");
      }

      return cssClasses.join(" ");
    },
    showTitle() {
      return (
        this.date.day() == this.firstDay || this.start.isSame(this.date, "day")
      );
    },
    start() {
      return moment(this.event.start);
    },
    // end () {
    //     return moment(this.event.end);
    // },
    end() {
      return moment(this.event.start);
    }
  }
};
</script>